<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button>点击我发送ajax请求</button>
    <script>
      /* 
            ajax的状态 ： 
                前端到后端的状态  ：
                可以通过 xhr.readyState 查看
                0 : ajax 初始化完毕 ，还没有调用open方法；
                1 : open方法已经调用 ，send 还没有调用；
                2 : 已经发送成功 ，头部返还成功；
                3 : 发送成功，部分请求体返还成功
                4 ： 全部返还成功；

                后端返还给前端的状态：
                    // 后端返还的状态码 ，http状态码；
                    // 200-299 之间就是成功；
                    xhr.status;
        */

      let btn = document.querySelector("button");
      btn.onclick = function () {
        let xhr = new XMLHttpRequest();
        console.log(xhr.readyState);
        xhr.open("get", "/getdata");
        console.log(xhr.readyState);
        xhr.send();

        // 监听 state的改变；
        // xhr.onreadystatechange = function(){
        //     // console.log(xhr.readyState);
        //     // console.log(xhr.status);
        //     if(xhr.readyState==4 ){
        //         if(xhr.status>=200 && xhr.status<300){
        //              console.log("ajax成功");
        //              console.log(xhr.responseText);
        //         }
        //     }
        // }

        xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log("ajax成功");
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>
